<template>
  <div class="bod">
    <div class="title">
      <p>消息</p>
    </div>
    <div class="icon-three">
      <ul>
        <li>
          <div class="bac">
            <van-icon name="like" size="30" color="#e84118" />
          </div>
          <p>赞和收藏</p>
        </li>
        <li>
          <div class="bac1">
            <van-icon name="friends" size="30" color="#0097e6" />
          </div>
          <p>新增关注</p>
        </li>
        <li>
          <div class="bac2">
            <van-icon name="chat" size="30" color="#10ac84" />
          </div>
          <p>评论和@</p>
        </li>
      </ul>
    </div>
    <div class="message-contain" v-for="item in 4" :key="item">
      <div class="message-image">
        <img src="../assets/img/1664345067715.jpg" alt="" />
      </div>
      <div class="message-content">
        <div class="user-name">
          <p>晚上不许做决定</p>
          <p>2022-08-06</p>
        </div>
        <div class="content">
          <p>我是诗经的遗孤，二十四史里久病的含情书</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.bod {
    // background-color: #f7eff0;
    overflow: hidden;
    height: 100vh;
    .title {
        text-align: center;
        p {
        margin: 5px auto;
        }
    }
    .icon-three {
        margin: 20px auto;
        height: 100px;
        ul {
            display: flex;
            justify-content: space-around;
            text-align: center;
            li {
                display: flex;
                flex-direction: column;
                align-items: center;
                .bac,
                .bac1,
                .bac2 {
                width: 50px;
                height: 50px;
                // background-color: gray;
                border-radius: 16px;
                i {
                    line-height: 50px;
                }
                }
                .bac {
                    background-color: rgb(250, 224, 224);
                }
                .bac1 {
                    background-color: #d9eff5;
                }
                .bac2 {
                    background-color: #d9f6ee;
                }
                p {
                    font-size: 14px;
                }
            }
        }
    }
  .message-contain {
    margin: 30px 15px;
    display: flex;
    align-items: center;

    .message-image {
      width: 40px;
      height: 40px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .message-content {
      display: flex;
      flex-direction: column;
      margin-left: 8px;
      .user-name {
        width: 280px;
        display: flex;
        justify-content: space-between;
        p {
          font-size: 12px;
          margin: 0;
          font-weight: 700;
        }
        p:last-child {
          color: gray;
          font-weight: 500;
        }
      }
      .content {
        p {
          font-size: 12px;
          margin: 0;
          color: gray;
        }
      }
    }
  }
}
</style>